import { Card, Table } from "antd"
import React, { useState, useEffect } from "react"
import { MunicipalLevel, provincialLevel } from "@api/hospitalList"
import { RightOutlined, DownOutlined } from "@ant-design/icons"
export default function Index() {
  // 省市区状态设定
  const [provinceData, setprovinceData] = useState<any>([]) // 省
  const [CityName, setCityName] = useState<any>([]) // 市
  const [cityData, septicityData] = useState<any>([]) // 区
  // 表格加载中
  const [loading, setLoading] = useState<any>(false)
  const [data, setData] = useState<any>([])

  // 定义行
  const columns: any = [
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "编码",
      dataIndex: "dictCode",
      key: "dictCode",
    },
    {
      title: "值",
      dataIndex: "value",
      key: "value",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
    },
  ]
  // 挂载
  useEffect(() => {
    const getList = async () => {
      const vas = await MunicipalLevel("1")
      setData(vas)
      // 获取保存省级数据
      const xxx = await provincialLevel()
      console.log(xxx[0].name)
    }
    getList()
  }, [])
  // 定义列
  const handleExpand = (onExpand: any, record: any) => {
    return async (e: any) => {
      const data = await MunicipalLevel(record.id)
      // record.children = data.map((item: any) => {
      //   return {
      //     ...item,
      //     isLeaf: false,
      //   }
      // })
      onExpand(record, e)
    }
  }
  return (
    <Card>
      <Table
        loading={loading}
        columns={columns}
        dataSource={data}
        // 添加key
        rowKey="id"
        // 设置表格边框
        bordered
        pagination={false}
        // expandable 配置可展开属性
        expandable={{
          // expandedRowRender: (record) => { expandedRowRender额外的展开行
          //   console.log(record) 这种写法会出现单独一列，当我们不需要单独一列时可以直接使用expandIcon
          //   return <span style={{ margin: 0 }}>{record.description}</span>
          // },
          // expanded, onExpand：函数, record:当前数据
          // expandIcon 自定义展开图表，值是个函数，有三个参数，返回的是个图标
          expandIcon: ({ expanded, onExpand, record }) => {
            if (!record.hasChildren) {
              return <span className="dict-box"></span>
            }

            return expanded ? (
              <DownOutlined
                className="dict-icon"
                onClick={(e) => onExpand(record, e)}
              />
            ) : (
              <RightOutlined
                className="dict-icon"
                onClick={() => {
                  handleExpand(onExpand, record)
                }}
              />
            )
          },
        }}
      />
    </Card>
  )
}
